<template>
  <div style="width: 100%; height: 100%">
    <l-map
      ref="map"
      v-model:zoom="zoom"
      class="mapContainer"
      @ready="onMapReady"
    >
      <l-tile-layer
        url="http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=3131a9355f28fb662853cfa719d3e160&x={x}&y={y}&z={z}"
        layer-type="base"
        name="OpenStreetMap"
        :options="{ corrdType: 'gcj02' }"
      />
      <ThematicsShade />
      <GISAreaList />
      <ThematicMarkerList :deviceCategoryManager="deviceCategoryList" />
      <ThematicPolylineList :deviceCategoryList="deviceCategoryList" />
      <ThematicHighlightFeature :deviceCategoryList="deviceCategoryList" />
    </l-map>
  </div>
</template>

<script>
import "leaflet/dist/leaflet.css";
import "leaflet";
import "@/utils/grid.ts";
import { LMap, LTileLayer } from "@vue-leaflet/vue-leaflet";
import ThematicMarkerList from "./MarkerList/index.vue";
import ThematicPolylineList from "./PolylineList/index.vue";
import ThematicHighlightFeature from "./HighlightFeature/index.vue";
import ThematicsShade from "./Shade/index.vue";
import GisPolygonInfoAPI from "@/api/GisPolygonInfoAPI";
import GISAreaList from "./AreaList/index.vue";
export default {
  components: {
    LMap,
    LTileLayer,
    ThematicMarkerList,
    ThematicPolylineList,
    ThematicHighlightFeature,
    ThematicsShade,
    GISAreaList,
  },
  props: ["deviceCategoryList"],
  data() {
    return {
      zoom: 12,
    };
  },
  methods: {
    // then get the instance on event
    onMapReady(instance) {
      this.instance = instance;
      window.__gmap = instance;
      // 地图定位到分公司城市中心点
      GisPolygonInfoAPI.api_init_geom({ pageIndex: 1, pageSize: 10 }).then(
        (res) => {
          if (res.data.items.length) {
            let positons = res.data.items[0].address.split(",").reverse();
            instance.setView(positons);
          } else {
            instance.setView([31.2, 121.2]);
          }
        }
      );
    },
  },
};
export const useMap = () => window.__gmap;
</script>

<style>
.mapContainer {
  .leaflet-control-attribution,
  .leaflet-control-zoom {
    display: none;
  }
}
</style>
